import { ImageResponse } from "next/og";
import { ENGINE_URL } from "@/lib/api";
import { PARTIES } from "@/lib/parties";

export const runtime = "nodejs";
export const alt = "QC26 — Prévision par circonscription";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  let d: { name: string; regionName: string | null; forecast?: { favorite: string; p: number; parties: { party: string; voteMean: number; pWin: number }[] } } | null = null;
  try { d = await fetch(`${ENGINE_URL}/api/ridings/${slug}`, { next: { revalidate: 300 } }).then((r) => (r.ok ? r.json() : null)); } catch { d = null; }
  const color = (id: string) => PARTIES.find((p) => p.id === id)?.color ?? "#999";
  const rows = (d?.forecast?.parties ?? []).filter((p) => p.party !== "aut").slice(0, 5);
  return new ImageResponse(
    (
      <div style={{ display: "flex", width: "100%", height: "100%", flexDirection: "column", background: "#F7F8FA", color: "#111318", padding: 56, fontFamily: "Inter, sans-serif" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "baseline", fontSize: 40, fontWeight: 800, letterSpacing: -2 }}><span>QC</span><span style={{ width: 4, height: 32, background: "#2563EB", margin: "0 6px", borderRadius: 2 }} /><span style={{ color: "#2563EB" }}>26</span></div>
          <div style={{ display: "flex", fontSize: 18, color: "#656B76", letterSpacing: 3, textTransform: "uppercase" }}>{d?.regionName ?? "Circonscription"}</div>
        </div>
        <div style={{ display: "flex", fontSize: 64, fontWeight: 800, letterSpacing: -2, marginTop: 24 }}>{d?.name ?? slug}</div>
        <div style={{ display: "flex", fontSize: 24, color: "#656B76", marginTop: 4 }}>Probabilité de victoire · projection QC26</div>
        <div style={{ display: "flex", flexDirection: "column", marginTop: 28, flex: 1 }}>
          {rows.map((p) => (
            <div key={p.party} style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 12 }}>
              <div style={{ display: "flex", width: 90, fontSize: 28, fontWeight: 700, color: color(p.party) }}>{p.party.toUpperCase()}</div>
              <div style={{ display: "flex", flex: 1, height: 24, background: "#E9ECF0", borderRadius: 6 }}><div style={{ display: "flex", width: `${p.pWin * 100}%`, height: 24, background: color(p.party), borderRadius: 6 }} /></div>
              <div style={{ display: "flex", width: 120, fontSize: 30, fontWeight: 800, textAlign: "right" }}>{Math.round(p.pWin * 100)} %</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 20, color: "#656B76" }}><span>Élection québécoise · 5 octobre 2026</span><span>qc26.ca</span></div>
      </div>
    ),
    { ...size },
  );
}